import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";
import { AuiDate } from "./date.component";
import { AuiYear } from "./year.component";
import { AuiMonth } from "./month.component";
import { AuiDatepicker } from "./datepicker.component";
import { subDays } from 'date-fns'

function createPopover(reference, popper) {
    if (reference) {
        var anotherPopper = new window.AUI.app.Popper(
            reference,
            popper,
            {
                placement: "bottom-start",
                modifiers: {
                    preventOverflow: { padding: 0 },
                    flip: { padding: 0 }
                }
            },
        );     
    }
}

class UiExampleDate extends BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
        }
    }
    _template() {        
        var self = this;
        return `<div class="${self._name}">
<div>
    <aui-date></aui-date>  

    <h5>调用标签</h5>
    <pre class="doc-pre"><code>aui-date</code></pre>  

    <h5>调用方法</h5>
    <pre class="doc-pre"><code>import { AuiDate } from "./date"; 
AuiDate.install();</code></pre>  

    <aui-year></aui-year>  

    <h5>调用标签</h5>
    <pre class="doc-pre"><code>aui-year</code></pre>  

    <h5>调用方法</h5>
    <pre class="doc-pre"><code>import { AuiYear } from "./year"; 
AuiYear.install();</code></pre> 

    <aui-month></aui-month>  

    <h5>调用标签</h5>
    <pre class="doc-pre"><code>aui-month</code></pre>  

    <h5>调用方法</h5>
    <pre class="doc-pre"><code>import { AuiMonth } from "./month"; 
AuiMonth.install();</code></pre>     
</div>
<div>
    <aui-datepicker 
    @dateselect="datepicker.onDateClick" 
    :now="datepicker.value"
    :startDate="datepicker.startDate" :endDate="datepicker.endDate"></aui-datepicker>
    
    <h5>调用标签</h5>
    <pre class="doc-pre"><code>aui-datepicker</code></pre>  

    <h5>调用方法</h5>
    <pre class="doc-pre"><code>import { AuiDatepicker } from "./datepicker"; 
AuiDatepicker.install();</code></pre>     

    <h5>属性</h5>
    <table class="doc-table">
        <tbody>
            <tr>
                <th>属性名</th>
                <th>类型</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>value</td>
                <td>Date</td>
                <td>日期</td>
            </tr>
            <tr>
                <td>startDate</td>
                <td>Date</td>
                <td>最小可选日期</td>
            </tr>       
            <tr>
                <td>endDate</td>
                <td>Date</td>
                <td>最大可选日期</td>
            </tr>                 
        </tbody>
    </table>

    <h5>事件</h5>
    <table class="doc-table">
        <tbody>
            <tr>
                <th>事件名</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>dateselect</td>
                <td>日期选中的时候</td>
            </tr>
        </tbody>
    </table>
</div>
</div>`;
    }
    _mounted() {
        var self = this;    
    }
    _data() {
        var ret = {};

        ret.hour = {
            navs: []
        };
        ret.minute = {
            navs: []
        };
        ret.second = {
            navs: []
        };

        ret.datepicker = {
            value: new Date(),
            startDate: subDays(new Date(), 1000),
            endDate: new Date(),
            onDateClick(e) {
                var day = e.target.getAttribute("data-day");
            }
        };
        
        return ret;        
    }  
}


AuiDate.install();
AuiMonth.install();
AuiYear.install();
AuiDatepicker.install();

window.AUICustomComponents.define("ui-example-date", UiExampleDate);

export default createSubpageComponent(
    `<ui-example-date></ui-example-date>`
);